'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    ListView,
    TouchableOpacity,
    DeviceEventEmitter,
    RefreshControl,
    Platform,
    TouchableWithoutFeedback,
    NativeModules,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import BDMapView from '../Components/BDMapView';
import Toast from '../Utils/toast';
import ScrollableTabView, {
    DefaultTabBar,
    ScrollableTabBar
} from 'react-native-scrollable-tab-view';

import {MapModule, Geolocation} from 'react-native-baidu-map';

import SearchDestinationPage from './SearchDestinationPage';
import CountryHomePage from './CountryHomePage';
import StayDetailsPage from './StayDetailsPage';
import SpecialtyDetailsPage from './SpecialtyDetailsPage';
import PlayDetailsPage from './PlayDetailsPage';
import DestinationAPIService from '../Commom/DestinationAPIService';
import CountryHomeContainer from '../Containers/CountryHomeContainer';

export default class DestinationPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceMapData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuOne = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuTwo = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuThree = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuFour = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceMapList: dataSourceMapData,
            dataSourceList: dataSourceListData,
            dataSourceListByOne: dataSourceListDataBuOne,
            dataSourceListByTwo: dataSourceListDataBuTwo,
            dataSourceListByThree: dataSourceListDataBuThree,
            dataSourceListByFour: dataSourceListDataBuFour,
            isShowMap: true,
            isChoose: 0,
            isMapShowSearch: false,
            latitude: -1,
            longitude: -1,
            onMapLongClickLatitude: -1,
            onMapLongClickLongitude: -1,
            clickId: 0,
            listDataType: 0,
            markerData: [],
            initMap: '1',
            isRefreshing: false,
            isRefresh: '1',
            allData: '',
            cleanText: true,
            inputSearchText: '',
            city: '',
            district: '',
            isSearch: false,
            searchType: -1,
            searchjindu: -1,
            searchweidu: -1,
        }
        ;
        this.closeKeybord = this.closeKeybord.bind(this);
        this.positioningResult = this.positioningResult.bind(this);
        this.clickResult = this.clickResult.bind(this);
        this.searchResult = this.searchResult.bind(this);
        this.MapDataRow = this.MapDataRow.bind(this);
        this.ListDataRow = this.ListDataRow.bind(this);
        this.listDataType = this.listDataType.bind(this);
        this.getWeizhi = this.getWeizhi.bind(this);
        this.getGeoCodeSearchOption = this.getGeoCodeSearchOption.bind(this);
        this.searchDestinationResult = this.searchDestinationResult.bind(this);
        this.cleanText = this.cleanText.bind(this);
        this.getDestinationData = this.getDestinationData.bind(this);
        this.getOnMapLongClickResultData = this.getOnMapLongClickResultData.bind(this);
        this.shemegui = this.shemegui.bind(this);
        this.searchNow = this.searchNow.bind(this);

    }

    componentDidMount() {

        DeviceEventEmitter.addListener('positioningResult', this.positioningResult);
        DeviceEventEmitter.addListener('onMapLongClickResult', this.onMapLongClickResult);
        DeviceEventEmitter.addListener('clickResult', this.clickResult);
        DeviceEventEmitter.addListener('searchResult', this.searchResult);

        //ios定位
        if (Platform.OS === 'ios') {
              console.log('开始定位了');
              this.getWeizhi();
        };

    }

    getDestinationData(longitude, latitude) {
        DestinationAPIService.destination(longitude, latitude, 1).then((ret)=> {
            console.log(ret);
            var allData = ret;
            var nowMapData = [];
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            var wanjian = [];
            for (let i = 0; i < allData.length; i++) {
                if (allData[i].type == 0) {
                    nowMapData.push(allData[i]);
                    wanjian.push({
                        latitude: allData[i].latitude,
                        longitude: allData[i].longitude,
                        ruralId: allData[i].rural_id,
                        type: this.state.isChoose + '',
                        positioning: this.state.latitude + this.state.longitude + '',
                    });
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                allData: ret,
                markerData: wanjian,
                initMap: '0',
                dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
        }).catch((err)=> {

        });
    }

    getOnMapLongClickResultData(longitude, latitude) {
        DestinationAPIService.destination(longitude, latitude, 1).then((ret)=> {
            var allData = ret;
            var nowMapData = [];
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            var wanjian = [];
            for (let i = 0; i < allData.length; i++) {
                if (allData[i].type == this.state.isChoose) {
                    nowMapData.push(allData[i]);
                    wanjian.push({
                        latitude: allData[i].latitude,
                        longitude: allData[i].longitude,
                        ruralId: allData[i].rural_id,
                        type: this.state.isChoose + '',
                        positioning: longitude + latitude + '',
                    });
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                allData: ret,
                markerData: wanjian,
                initMap: '-1',
                onMapLongClickLatitude: latitude,
                onMapLongClickLongitude: longitude,
                dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
        }).catch((err)=> {

        });
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }

    //覆盖物点击事件
    clickResult = (e)=> {
        for (var i = 0; i < this.state.markerData.length; i++) {
            console.log(this.state.markerData.ruralId);
            if (this.state.markerData[i].ruralId == e.clickId) {
                var wanjian = this.refs.MapDataRow;
                wanjian.scrollResponderScrollTo({x: 280 * i, y: 0, animated: true});
            }
        }
        this.setState(
            {
                clickId: e.clickId,
            });
    }

    searchResult = (e)=> {
        if (this.state.isSearch == true) {
            return;
        }

        console.log('wanjian', 'searchResult' + e.searchType);
        console.log('wanjian', 'searchResult' + e.latitude);
        console.log('wanjian', 'searchResult' + e.longitude);
        this.setState({
            searchType: e.searchType,
            searchjindu: e.longitude,
            searchweidu: e.latitude,
        });
        if (e.latitude == 0 && e.longitude == 0) {
            console.log('村' + this.state.inputSearchText);
            DestinationAPIService.searchDestinationlist(this.state.city, this.state.inputSearchText, '', '', '', 1).then((ret)=> {
                var allData = ret;
                var nowMapData = [];
                var nowListDataOne = [];
                var nowListDataTwo = [];
                var nowListDataThree = [];
                var nowListDataFour = [];
                var wanjian = [];
                for (let i = 0; i < allData.length; i++) {
                    if (allData[i].type == this.state.isChoose) {
                        nowMapData.push(allData[i]);
                        wanjian.push({
                            latitude: allData[i].latitude,
                            longitude: allData[i].longitude,
                            ruralId: allData[i].rural_id,
                            type: this.state.isChoose + '',
                            positioning: this.state.latitude + this.state.longitude + '',
                        });
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 0) {
                        nowListDataOne.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 1) {
                        nowListDataTwo.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 2) {
                        nowListDataThree.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 3) {
                        nowListDataFour.push(allData[i]);
                    }
                }
                this.setState({
                    allData: ret,
                    isSearch: true,
                    markerData: wanjian,
                    initMap: this.state.isChoose + '',
                    dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                    dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                    dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                    dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                    dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                    dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
                });
            }).catch((err)=> {

            });

        } else {
            console.log('镇区');
            DestinationAPIService.searchDestinationlist('', '', e.longitude, e.latitude, '10000', 1).then((ret)=> {
                var allData = ret;
                var nowMapData = [];
                var nowListDataOne = [];
                var nowListDataTwo = [];
                var nowListDataThree = [];
                var nowListDataFour = [];
                var wanjian = [];
                for (let i = 0; i < allData.length; i++) {
                    if (allData[i].type == this.state.isChoose) {
                        nowMapData.push(allData[i]);
                        wanjian.push({
                            latitude: allData[i].latitude,
                            longitude: allData[i].longitude,
                            ruralId: allData[i].rural_id,
                            type: this.state.isChoose + '',
                            positioning: this.state.latitude + this.state.longitude + '',
                        });
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 0) {
                        nowListDataOne.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 1) {
                        nowListDataTwo.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 2) {
                        nowListDataThree.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 3) {
                        nowListDataFour.push(allData[i]);
                    }
                }
                this.setState({
                    allData: ret,
                    isSearch: true,
                    markerData: wanjian,
                    initMap: this.state.isChoose + '',
                    dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                    dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                    dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                    dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                    dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                    dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
                });

            }).catch((err)=> {

            });
        }
    }

    //定位回调 返回经纬度
    positioningResult = (e)=> {
        console.log('定位回调', e.latitude);
        console.log('定位回调', e.longitude);
        console.log('定位回调', e.city);
        this.setState(
            {
                latitude: e.latitude,
                longitude: e.longitude,
                onMapLongClickLatitude: e.latitude,
                onMapLongClickLongitude: e.longitude,
                city: e.city,
            });
        Global.Const.longitude = e.longitude;
        Global.Const.latitude = e.latitude;
        this.getDestinationData(e.longitude, e.latitude);
    }

    //长按地图回调、滑动地图结束回调
    onMapLongClickResult = (e)=> {
        if (this.state.searchType == -1) {
            this.getOnMapLongClickResultData(e.longitude, e.latitude);
        } else {
            if (this.state.searchjindu == 0 && this.state.searchweidu == 0) {
                this.shemegui(e.longitude, e.latitude, this.state.city, this.state.inputSearchText, '', '', '', 1)
            } else {
                this.shemegui(e.longitude, e.latitude, '', '', this.state.searchjindu, this.state.searchweidu, '10000', 1)
            }
        }
    }

    shemegui(longitude, latitude, city, search, jindu, weidu, scope, page) {
        console.log('=====>', this.state.searchjindu);
        console.log('=====>', this.state.searchweidu);
        console.log('=====>', this.state.searchType);
        DestinationAPIService.searchDestinationlist(city, search, jindu, weidu, scope, page).then((ret)=> {
            var allData = ret;
            var nowMapData = [];
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            var wanjian = [];
            for (let i = 0; i < allData.length; i++) {
                if (allData[i].type == this.state.isChoose) {
                    nowMapData.push(allData[i]);
                    wanjian.push({
                        latitude: allData[i].latitude,
                        longitude: allData[i].longitude,
                        ruralId: allData[i].rural_id,
                        type: this.state.isChoose + '',
                        positioning: latitude + longitude + '',
                    });
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                allData: ret,
                isSearch: true,
                markerData: wanjian,
                initMap: '-1',
                onMapLongClickLatitude: latitude,
                onMapLongClickLongitude: longitude,
                dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
        }).catch((err)=> {

        });
    }

    searchNow(city, search, jindu, weidu, scope, page) {
        DestinationAPIService.searchDestinationlist(city, search, jindu, weidu, scope, page).then((ret)=> {
            var allData = ret;
            var nowMapData = [];
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            var wanjian = [];
            for (let i = 0; i < allData.length; i++) {
                if (allData[i].type == this.state.isChoose) {
                    nowMapData.push(allData[i]);
                    wanjian.push({
                        latitude: allData[i].latitude,
                        longitude: allData[i].longitude,
                        ruralId: allData[i].rural_id,
                        type: this.state.isChoose + '',
                        positioning: this.state.latitude + this.state.longitude + '',
                    });
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                allData: ret,
                isSearch: true,
                markerData: wanjian,
                initMap: '1',
                isRefresh: '1',
                onMapLongClickLatitude: this.state.latitude,
                onMapLongClickLongitude: this.state.longitude,
                dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
        }).catch((err)=> {

        });
    }

    //地图listview数据item
    MapDataRow(rowData, index) {
        return (
            <View style={{width:280,height:100}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(index,rowData.rural_id)}>
                    <View
                        style={{borderRadius:4,width:275,height:100,flexDirection:'row',alignItems:'center',backgroundColor:'white'}}>
                        <Image style={{width:82,height:82,marginLeft:10}}
                               source={{uri:rowData.rural_image}}/>
                        <View style={{width:170,height:100}}>
                            <Text
                                style={{fontSize:17,color:Global.FontColor.DimGray,marginLeft:10,marginTop:8}}>{rowData.rural_title}</Text>
                            <View style={{flexDirection:'row',marginTop:18,marginLeft:10,alignItems:'center'}}>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.town}</Text>
                                <View
                                    style={{height:12,width:1,backgroundColor:Global.FontColor.LightGrey,marginLeft:5,marginRight:5}}/>
                                <Text style={{fontSize:12,color:'red'}}>{rowData.been_to}</Text>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>人去过</Text>
                            </View>
                            <Text numberOfLines={1}
                                  style={{marginLeft:10,marginTop:3,fontSize:12}}>{rowData.introduce}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    //text标签view
    labelTextView(type) {
        if (this.state.listDataType == 0) {
            switch (type) {
                case 0:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_rural_green.png')}/>
                        </View>
                    )
                    break;
                case 1:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_fun_yellow.png')}/>
                        </View>
                    )
                    break;
                case 2:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_specialty_purple.png')}/>
                        </View>
                    )
                    break;
                case 3:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_zhusu_pink.png')}/>
                        </View>
                    )
                    break;
            }
        } else {
            return null;
        }

    }

    //列表listview数据item
    ListDataRow(rowData) {
        return (
            <View style={{backgroundColor:'white'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(rowData.type,rowData.rural_id)}>
                    <View
                        style={{width:Global.Const.size.width,height:105,flexDirection:'row',alignItems:'center',backgroundColor:'white'}}>
                        <Image style={{width:80,height:80,marginLeft:10,marginRight:10}}
                               source={{uri:rowData.rural_image}}/>
                        <View style={{width:Global.Const.size.width-100,height:100}}>
                            <Text
                                style={{fontSize:14,color:Global.FontColor.DimGray,marginTop:12}}>{rowData.rural_title}</Text>
                            <View style={{flexDirection:'row',marginTop:10,alignItems:'center'}}>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.town}</Text>
                                <View
                                    style={{height:12,width:1,backgroundColor:Global.FontColor.LightGrey,marginLeft:5,marginRight:5}}/>
                                <Text style={{fontSize:12,color:'red'}}>{rowData.been_to}</Text>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>人去过</Text>
                            </View>
                            <Text numberOfLines={1}
                                  style={{marginTop:8,fontSize:12,color:Global.FontColor.LightGrey}}>{rowData.introduce}</Text>
                        </View>
                        {this.labelTextView(rowData.type)}
                    </View>
                    {rowData.comments != null ? <View
                        style={{width:Global.Const.size.width-20,flexDirection:'row',backgroundColor:Global.Const.transparent,borderRadius:4,marginLeft:10,marginRight:10}}>
                        <Image
                            style={{marginTop:5,marginBottom:5,width:20,height:20,marginLeft:5,borderRadius:10,marginRight:7}}
                            source={{uri:rowData.comments.critics_head_url}}
                        />
                        <Text numberOfLines={2}
                              style={{marginTop:Platform.OS === 'android'?3:5,backgroundColor:'rgba(0,0,0,0)',marginBottom:5,lineHeight:20,fontSize:12,color:Global.FontColor.DarkGray,width:Global.Const.size.width-50}}>{rowData.comments.content}</Text>
                    </View> : null}
                    {rowData.comments != null ? <View
                        style={{marginTop:10,width:Global.Const.size.width,height:1,backgroundColor:Global.Const.transparent}}/> :
                        <View
                            style={{marginTop:3,width:Global.Const.size.width,height:1,backgroundColor:Global.Const.transparent}}/>}

                </TouchableOpacity>
            </View>
        );
    }

    //点击跳转事件
    ClickAction(number, id) {
        switch (number) {
            case 100:
                //返回当前
                var nice = this.refs.MapDataRow;
                nice.scrollResponderScrollTo({x: 0, y: 0, animated: true});


                if (this.state.searchType == -1) {
                    DestinationAPIService.destination(this.state.longitude, this.state.latitude, 1).then((ret)=> {
                        var allData = ret;
                        var nowMapData = [];
                        var nowListDataOne = [];
                        var nowListDataTwo = [];
                        var nowListDataThree = [];
                        var nowListDataFour = [];
                        var wanjian = [];
                        for (let i = 0; i < allData.length; i++) {
                            if (allData[i].type == this.state.isChoose) {
                                nowMapData.push(allData[i]);
                                wanjian.push({
                                    latitude: allData[i].latitude,
                                    longitude: allData[i].longitude,
                                    ruralId: allData[i].rural_id,
                                    type: this.state.isChoose + '',
                                    positioning: this.state.longitude + this.state.latitude + '1',
                                });
                            }
                        }
                        for (let i = 0; i < allData.length; i++) {
                            if ((allData[i].type) == 0) {
                                nowListDataOne.push(allData[i]);
                            }
                        }
                        for (let i = 0; i < allData.length; i++) {
                            if ((allData[i].type) == 1) {
                                nowListDataTwo.push(allData[i]);
                            }
                        }
                        for (let i = 0; i < allData.length; i++) {
                            if ((allData[i].type) == 2) {
                                nowListDataThree.push(allData[i]);
                            }
                        }
                        for (let i = 0; i < allData.length; i++) {
                            if ((allData[i].type) == 3) {
                                nowListDataFour.push(allData[i]);
                            }
                        }
                        console.log('dianji',this.state.latitude)
                        console.log('dianji',this.state.longitude)
                        this.setState({
                            allData: ret,
                            markerData: wanjian,
                            initMap: this.state.isChoose + '',
                            isRefresh: '1',
                            onMapLongClickLatitude: this.state.latitude,
                            onMapLongClickLongitude: this.state.longitude,
                            dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                            dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                            dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                            dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                            dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                            dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
                        });
                    }).catch((err)=> {

                    });
                } else {
                    if (this.state.searchjindu == 0 && this.state.searchweidu == 0) {
                        this.searchNow(this.state.city, this.state.inputSearchText, '', '', '', 1)
                    } else {
                        this.searchNow('', '', this.state.searchjindu, this.state.searchweidu, '10000', 1)
                    }
                }

                break;
            case 0:
                //乡村主页
                this.props.navigator.push({
                    id: 'CountryHomePage',
                    component: CountryHomePage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 1:
                console.log('====', id);
                //游玩主页
                this.props.navigator.push({
                    id: 'PlayDetailsPage',
                    component: PlayDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 2:
                //特产主页
                this.props.navigator.push({
                    id: 'SpecialtyDetailsPage',
                    component: SpecialtyDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 3:
                //住宿主页
                this.props.navigator.push({
                    id: 'StayDetailsPage',
                    component: StayDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
        }
    }

    //显示地图或者列表（true:地图  false:列表）
    showListOrMap(ShowOrHidden) {
        this.setState({
            isShowMap: ShowOrHidden,
            initMap: this.state.isChoose + '',
        });
    }

    //选择筛选类型
    choose(choose) {
        var allData = this.state.allData;
        var nowMapData = [];
        for (let i = 0; i < allData.length; i++) {
            if (allData[i].type == choose) {
                nowMapData.push(allData[i]);
            }
        }

        var wanjian = [];
        for (let i = 0; i < allData.length; i++) {
            if (allData[i].type == choose) {
                wanjian.push({
                    latitude: allData[i].latitude,
                    longitude: allData[i].longitude,
                    ruralId: allData[i].rural_id,
                    type: choose + '',
                    positioning: this.state.longitude + this.state.latitude + '',
                });
            }
        }

        this.setState({
            markerData: wanjian,
            initMap: choose + '',
            dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
            isChoose: choose,
            isRefresh: '-1',
        });
    }

    //显示地图搜索框
    showMapSearch(isShow) {
        this.setState({
            isMapShowSearch: isShow,
            district: ''
        });
        if (!isShow) {
            setTimeout(() => {
                this.searchDestinationResult(false);
            }, 1000);
        }
    }

    //跳到列表搜索界面
    searchDestination() {
        this.props.navigator.push({
            id: 'SearchDestinationPage',
            component: SearchDestinationPage,
            passProps: {}
        });
    }

    //列表数据显示类型
    listDataType(postion) {
        if (postion == 0 || postion == 1 || postion == 2 || postion == 3 || postion == 4) {
            this.setState({
                listDataType: postion,
            });
        }
    }

    //搜索目的地
    searchDestinationResult(isSearch) {

        this.closeKeybord();
        if (isSearch) {
            this.setState({
                isSearch: false,
                isChoose: 0,
                cleanText: false,
                city: this.state.city,
                district: this.state.inputSearchText,
                initMap: this.state.isChoose + '',
                isRefresh: '1',
            });
        } else {
            this.setState({
                searchType: -1,
                searchjindu: -1,
                searchweidu: -1,
            });
            DestinationAPIService.destination(this.state.longitude, this.state.latitude, 1).then((ret)=> {
                var allData = ret;
                var nowMapData = [];
                var nowListDataOne = [];
                var nowListDataTwo = [];
                var nowListDataThree = [];
                var nowListDataFour = [];
                var wanjian = [];
                for (let i = 0; i < allData.length; i++) {
                    if (allData[i].type == 0) {
                        nowMapData.push(allData[i]);
                        wanjian.push({
                            latitude: allData[i].latitude,
                            longitude: allData[i].longitude,
                            ruralId: allData[i].rural_id,
                            type: '0',
                            positioning: this.state.latitude + this.state.longitude + '',
                        });
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 0) {
                        nowListDataOne.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 1) {
                        nowListDataTwo.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 2) {
                        nowListDataThree.push(allData[i]);
                    }
                }
                for (let i = 0; i < allData.length; i++) {
                    if ((allData[i].type) == 3) {
                        nowListDataFour.push(allData[i]);
                    }
                }
                this.setState({
                    allData: ret,
                    isChoose: 0,
                    cleanText: true,
                    inputSearchText: '',
                    markerData: wanjian,
                    initMap: '0',
                    dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                    dataSourceList: this.state.dataSourceList.cloneWithRows(this.state.allData),
                    dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                    dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                    dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                    dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
                    isRefresh: '1',
                });
            }).catch((err)=> {

            });
        }


    }


    //刷新数据
    onRefreshData() {
        this.setState({
            isRefreshing: true,
        });
        DestinationAPIService.destination(this.state.longitude, this.state.latitude, 1).then((ret)=> {
            console.log(ret);
            var allData = ret;
            var nowMapData = [];
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            var wanjian = [];
            for (let i = 0; i < allData.length; i++) {
                if (allData[i].type == 0) {
                    nowMapData.push(allData[i]);
                    wanjian.push({
                        latitude: allData[i].latitude,
                        longitude: allData[i].longitude,
                        ruralId: allData[i].rural_id,
                        type: this.state.isChoose + '',
                        positioning: this.state.latitude + this.state.longitude + '',
                    });
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                isRefreshing: false,
                allData: ret,
                markerData: wanjian,
                initMap: this.state.isChoose + '',
                dataSourceMapList: this.state.dataSourceMapList.cloneWithRows(nowMapData),
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
            Toast.show('刷新成功');
        }).catch((err)=> {
            this.setState({
                        isRefreshing: false,
                    });
        });
        // this.timer = setTimeout(
        //     () => {
        //         this.onFetch();
        //     },
        //     500
        // );
    }

    // //刷新数据成功
    // onFetch() {
    //     this.setState({
    //         isRefreshing: false,
    //     });
    //     Toast.show('刷新成功');
    // }

    //加载更多数据
    loadMoreData() {
        this.setState({
            isRefreshing: true,
        });
        this.timer = setTimeout(
            () => {
                this.endShowLoadData();
            },
            500
        );
    }

    //加载更多数据完成
    endShowLoadData() {
        this.setState({
            isRefreshing: false,
        });
        Toast.show('木有更多数据');
    }


    getGeoCodeSearchOption(city, addr) {
        Geolocation.geocode(city, addr)
            .then(data => {
                console.log('检索成功');
                console.log(data);

            })
            .catch(e => {
                console.warn(e, 'error');
                console.log('检索失败');

            })
    }

    getWeizhi() {

        Geolocation.getCurrentPosition()
            .then(dataPOS => {
                console.log('首次定位成功:', dataPOS);
                this.setState({
                    city:'珠海市',
                    latitude: dataPOS.latitude,
                    longitude: dataPOS.longitude,
                    onMapLongClickLatitude: dataPOS.latitude,
                    onMapLongClickLongitude: dataPOS.longitude,
                });
                //反地理编码
                Geolocation.reverseGeoCodeGPS(dataPOS.latitude, dataPOS.longitude)
                    .then((data) => {
                        this.setState({
                            city: data.city,
                        });
                console.log('首次定位城市成功:', data);
                    }).catch((e) => {
                console.log('首次定位城市失败:', e);
                });
                Global.Const.longitude = dataPOS.longitude;
                Global.Const.latitude = dataPOS.latitude;
                this.getDestinationData(dataPOS.latitude, dataPOS.longitude);


            }).catch(e => {
            console.warn(e, ':定位失败error');
            
        });
    }


    _onMarkerClick(e) {

        for (var i = 0; i < this.state.markerData.length; i++) {
            if (this.state.markerData[i].ruralId == e.title) {
                var wanjian = this.refs.MapDataRow;
                wanjian.scrollResponderScrollTo({x: 280 * i, y: 0, animated: true});
            }
        }
        this.setState(
            {
                clickId: e.title,
            });
    }


    _onMapStatusChange(e) {
        console.log(e);

        if (e.latitude>2){
            this.setState({

                onMapLongClickLatitude: e.latitude,
                onMapLongClickLongitude: e.longitude,
                initMap: '-1',
                isRefresh: '-2',

            });
        }



    }



    myOnChangeText(inputSearchText) {
        this.setState({
            cleanText: true,
            inputSearchText: inputSearchText,
        });
    }

    cleanText() {
        if (!this.state.cleanText) {
            return (
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.showMapSearch(false)}>
                    <Image style={{width:15,height:15}}
                           source={require('../../Image/icon_close.png')}/>
                </TouchableOpacity>
            );
        }
    }

    render() {
        var choose = this.state.isChoose;
        if (this.state.isShowMap) {
            return (
                <View style={styles.container}>
                    <BDMapView
                        style={{width:Global.Const.size.width,height:Global.Const.size.height,position:'absolute',top:0,left:0}}
                        markers={
                          this.state.markerData
                         }
                        marker={{
                               longitude: this.state.onMapLongClickLongitude,
                               latitude: this.state.onMapLongClickLatitude,
                               initMap:this.state.initMap,
                               isRefresh:this.state.isRefresh,
                               city:this.state.city,
                               district:this.state.district
                       }}

                        onMarkerClick={(e) => {this._onMarkerClick(e)}}
                        onMapStatusChange={(e) => {this._onMapStatusChange(e)}}
                        onMapStatusDidChange={(e) => {this.onMapLongClickResult(e)}}
                        onSearchResult={(e) => {this.searchResult(e)}}
                    />
                    <View
                        style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>
                        <View style={{marginTop:25}}>

                            <View
                                style={{alignItems: 'center',width:Global.Const.size.width-65,height:32,backgroundColor:'#F1EFEF',borderRadius:5,marginLeft:15, flexDirection: 'row'}}
                            >

                                <Image style={{width:15,height:15,marginLeft:8}}
                                       source={require('../../Image/search_icon.png')}/>
                                <TextInput
                                    style={{marginTop:-1,width:Global.Const.size.width-110,fontSize:12,marginLeft:Platform.OS === 'ios'?12:null}}
                                    placeholder={'请选择您的目的地'}
                                    value={this.state.inputSearchText}
                                    underlineColorAndroid={'transparent'}
                                    returnKeyType={'search'}
                                    onChangeText={(inputSearchText)=>this.myOnChangeText(inputSearchText)}
                                    onSubmitEditing={()=>this.searchDestinationResult(true)}
                                />

                                {this.cleanText()}
                            </View>
                            <View
                                style={{justifyContent:'center', position: 'absolute',right: 15,top: 2,alignItems:'center'}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.showListOrMap(false)}>
                                    <Image
                                        style={{marginLeft:5,marginTop:3,width:23,height:20,resizeMode:'contain'}}
                                        source={require('../../Image/icon_list.png')}/>
                                </TouchableOpacity>
                            </View>

                        </View>

                    </View>

                    <View
                        style={{borderRadius:3,backgroundColor:'white',justifyContent:'center',alignItems:'center',position:'absolute',left: 10,bottom: 122,width:40,height:40}}>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(100,0)}>
                            <View>
                                <Image
                                    style={{width:21,height:21,resizeMode:'contain'}}
                                    source={require('../../Image/main/bg_positioning.png')}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View
                        style={{justifyContent:'center',alignItems:'center',position: 'absolute',right:10,bottom: 120,width:70,height:141}}>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.choose(0)}>
                            <View
                                style={{borderRadius:3,flexDirection:'row',width:64,height:30,justifyContent:'center',alignItems:'center'}}>
                                <Image
                                    style={{resizeMode:'contain',width:64,height:30,position: 'absolute',left:0,top:0}}
                                    source={choose==0 ? require('../../Image/main/bg_rural_green.png'):require('../../Image/main/bg_white_icon.png')}/>
                                <Text
                                    style={{fontSize:12,color:choose==0 ? 'white' : '#3ACF80',backgroundColor:'rgba(0,0,0,0)'}}>乡村</Text>
                                <Image
                                    style={{marginLeft:6,width:15,height:15,resizeMode:'contain'}}
                                    source={choose==0 ? require('../../Image/main/icon_rural_white.png'):require('../../Image/main/icon_rural_green.png')}/>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.choose(1)}>
                            <View
                                style={{marginTop:7,borderRadius:3,flexDirection:'row',width:64,height:30,justifyContent:'center',alignItems:'center'}}>
                                <Image
                                    style={{resizeMode:'contain',width:64,height:30,position: 'absolute',left:0,top:0}}
                                    source={choose==1 ? require('../../Image/main/bg_fun_yellow.png'):require('../../Image/main/bg_white_icon.png')}/>
                                <Text
                                    style={{fontSize:12,color:choose==1 ? 'white' : '#FFAE10',backgroundColor:'rgba(0,0,0,0)'}}>游玩</Text>
                                <Image
                                    style={{marginLeft:6,width:15,height:15,resizeMode:'contain'}}
                                    source={choose==1 ? require('../../Image/main/icon_fun_white.png'):require('../../Image/main/icon_fun_yellow.png')}/>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.choose(2)}>
                            <View
                                style={{marginTop:7,borderRadius:3,flexDirection:'row',width:64,height:30,justifyContent:'center',alignItems:'center'}}>
                                <Image
                                    style={{resizeMode:'contain',width:64,height:30,position: 'absolute',left:0,top:0}}
                                    source={choose==2 ? require('../../Image/main/bg_specialty_purple.png'):require('../../Image/main/bg_white_icon.png')}/>
                                <Text
                                    style={{fontSize:12,color:choose==2 ? 'white' : '#9587E6',backgroundColor:'rgba(0,0,0,0)'}}>特产</Text>
                                <Image
                                    style={{marginLeft:6,width:15,height:15,resizeMode:'contain'}}
                                    source={choose==2 ? require('../../Image/main/icon_specialty_white.png'):require('../../Image/main/icon_specialty_purple.png')}/>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.choose(3)}>
                            <View
                                style={{marginTop:7,borderRadius:3,flexDirection:'row',width:64,height:30,justifyContent:'center',alignItems:'center'}}>
                                <Image
                                    style={{resizeMode:'contain',width:64,height:30,position: 'absolute',left:0,top:0}}
                                    source={choose==3 ? require('../../Image/main/bg_zhusu_pink.png'):require('../../Image/main/bg_white_icon.png')}/>
                                <Text
                                    style={{fontSize:12,color:choose==3 ? 'white' : '#F76C6C',backgroundColor:'rgba(0,0,0,0)'}}>住宿</Text>
                                <Image
                                    style={{marginLeft:6,width:15,height:15,resizeMode:'contain'}}
                                    source={choose==3 ? require('../../Image/main/icon_zusu_white.png'):require('../../Image/main/icon_zhusu_pink.png')}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <ListView
                        ref='MapDataRow'
                        style={{ position: 'absolute',left: 5,right:5,bottom:10}}
                        enableEmptySections={true}
                        horizontal={true}
                        initialListSize={10}
                        dataSource={this.state.dataSourceMapList}
                        renderRow={(rowData)=>this.MapDataRow(rowData,choose)}
                    />
                </View>
            );
        } else {
            return (
                <View style={styles.container}>
                    <View
                        style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>
                        <View style={{marginTop:25}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.searchDestination()}>
                                <View
                                    style={{alignItems: 'center',width:Global.Const.size.width-65,height:32,backgroundColor:'#F1EFEF',borderRadius:5,marginLeft:15, flexDirection: 'row'}}
                                >

                                    <Image style={{width:15,height:15,marginLeft:8}}
                                           source={require('../../Image/search_icon.png')}/>
                                    <Text style={{flex:1,fontSize:12,marginLeft:12,marginTop:-1,backgroundColor:null}}
                                    >请选择您的目的地</Text>

                                </View>
                            </TouchableOpacity>
                            <View
                                style={{justifyContent:'center', position: 'absolute',right: 15,top: 2,alignItems:'center'}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.showListOrMap(true)}>
                                    <Image style={{marginLeft:5,marginTop:3,width:23,height:20,resizeMode:'contain'}}
                                           source={require('../../Image/icon_map.png')}/>
                                </TouchableOpacity>
                            </View>
                        </View>

                    </View>
                    <View
                        style={{height:2,width:Global.Const.size.width,backgroundColor:Global.Const.transparent}}/>

                    <View style={{backgroundColor:'white',flex:1}}>
                        <ScrollableTabView
                            renderTabBar={
                            () => <DefaultTabBar
                            textStyle={{ fontSize: 15,marginTop: 8}}
                            style={{height:40,borderBottomColor: '#F5F5F5'}}/>}
                            initialPage={0}
                            tabBarUnderlineStyle={{backgroundColor: '#24CD78',height:3}}
                            tabBarUnderlineColor={'#FF0000'}
                            tabBarActiveTextColor={'#24CD78'}
                            tabBarInactiveTextColor={'#333333'}
                            tabBarPosition='top'
                            onChangeTab={(obj) => {
                                   this.listDataType(obj.i)
                                }
                              }
                        >
                            <View tabLabel="全部">
                                <ListView
                                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                    onEndReachedThreshold={50}
                                    onEndReached={() => {this.loadMoreData()}}

                                    enableEmptySections={true}
                                    dataSource={this.state.dataSourceList}
                                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>
                            </View>
                            <View tabLabel="乡村"
                                  style={{ flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#f7f7f7'}}>
                                <ListView
                                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                    onEndReachedThreshold={50}
                                    onEndReached={() => {this.loadMoreData()}}
                                    enableEmptySections={true}
                                    dataSource={this.state.dataSourceListByOne}
                                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>
                            </View>
                            <View tabLabel="游玩"
                                  style={{ flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#f7f7f7'}}>
                                <ListView
                                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                    onEndReachedThreshold={50}
                                    onEndReached={() => {this.loadMoreData()}}
                                    enableEmptySections={true}
                                    dataSource={this.state.dataSourceListByTwo}
                                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>
                            </View>
                            <View tabLabel="特产"
                                  style={{ flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#f7f7f7'}}>
                                <ListView
                                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                    onEndReachedThreshold={50}
                                    onEndReached={() => {this.loadMoreData()}}
                                    enableEmptySections={true}
                                    dataSource={this.state.dataSourceListByThree}
                                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>
                            </View>
                            <View tabLabel="住宿"
                                  style={{ flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#f7f7f7'}}>
                                <ListView
                                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                    onEndReachedThreshold={50}
                                    onEndReached={() => {this.loadMoreData()}}
                                    enableEmptySections={true}
                                    dataSource={this.state.dataSourceListByFour}
                                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>
                            </View>
                        </ScrollableTabView>
                    </View>
                </View>
            );
        }
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});
